<template>
  <div class="result">
    <div class="table-container">
      <div class="table-content" :class="{ 'table-result': resultBtn }">
        <div class="header part">
          <div class="operate" v-if="!resultBtn">操作</div>
          <div class="operate" v-else>时间</div>
          <div class="index">序号</div>
          <div class="desc">故障内容</div>
          <div class="team-item" v-for="(item, index) in teamList" :key="index">
            <div
              :class="{
                serious: item.color == 'red',
                general: item.color == 'yellow',
                secure: item.color == 'green',
                normal: item.color == 'gray',
              }"
              @click="handleItemName(item.teamName)"
            >
              {{ item.teamName }}
              <span class="count">{{ item.count }}</span>
            </div>
          </div>
        </div>
        <div
          class="content part"
          v-for="(item, index) in tableList"
          :key="index"
        >
          <div class="operate" v-if="!resultBtn">
            <img
              @click="handleDeleteItem(item)"
              src="./assets/jieguoye-02.png"
              alt=""
              class="operate-img"
            />
          </div>
          <div class="operate" v-else>
            {{ item.dataTime }}
          </div>
          <div class="index">{{ item.indexNumber }}</div>
          <div class="desc">
            {{ item.faultContent }}
          </div>
          <template
            v-for="(child, childIndex) in item.teamData"
            :key="childIndex"
          >
            <div class="team-item">
              <img
                v-if="child == 'red'"
                src="./assets/jieguoye-07.png"
                alt=""
                class="team-img"
              />
              <img
                v-if="child == 'yellow'"
                src="./assets/jieguoye-08.png"
                alt=""
                class="team-img"
              />
              <img
                v-if="child == 'green'"
                src="./assets/jieguoye-09.png"
                alt=""
                class="team-img"
              />
            </div>
          </template>
        </div>
      </div>
      <div
        class="primary-btn"
        @click="handleConfirmResult"
        v-if="!resultBtn && !showNumTask"
      ></div>
    </div>
    <div class="mask" v-if="showNumTask">
      <!-- 数字弹窗 -->
      <div class="num-task">
        <div class="task-text">新增故障数量选择</div>
        <div
          class="num-item"
          :class="{ active: number == 1 }"
          @click="handleClickNum(1)"
        >
          1
        </div>
        <div
          class="num-item"
          :class="{ active: number == 2 }"
          @click="handleClickNum(2)"
        >
          2
        </div>
        <div
          class="num-item"
          :class="{ active: number == 3 }"
          @click="handleClickNum(3)"
        >
          3
        </div>
        <div
          class="num-item"
          :class="{ active: number == 4 }"
          @click="handleClickNum(4)"
        >
          4
        </div>
        <div
          class="num-item"
          :class="{ active: number == 5 }"
          @click="handleClickNum(5)"
        >
          5
        </div>
        <div
          class="num-item"
          :class="{ active: number == 6 }"
          @click="handleClickNum(6)"
        >
          6
        </div>
        <div
          class="num-item"
          :class="{ active: number == 7 }"
          @click="handleClickNum(7)"
        >
          7
        </div>
        <div
          class="num-item"
          :class="{ active: number == 8 }"
          @click="handleClickNum(8)"
        >
          8
        </div>
        <div
          v-if="route.query.type == 1"
          class="num-item"
          :class="{ active: number == 9 }"
          @click="handleClickNum(9)"
        >
          9
        </div>
      </div>
      <!-- 数字弹窗下 出现的确定按钮 -->
      <div
        class="primary-btn"
        v-if="showNumTask && !resultBtn"
        @click="confirmChooseNum"
      ></div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
import {
  getListData,
  deleteResult,
  confirmResult,
  getAllResult,
  againResult,
} from "@/api/api.js";
const showNumTask = ref(false);
const teamName = ref("");
const number = ref();
const handleItemName = (name) => {
  if (!resultBtn.value) {
    teamName.value = name;
    showNumTask.value = true;
  }
};
const handleClickNum = (index) => {
  if (number.value === index) {
    number.value = "";
  } else {
    number.value = index;
  }
};
const againResultFn = async () => {
  const data = await againResult({
    teamName: teamName.value,
    number: number.value,
  });

  tableList.value = data.data.rows;
  tableList.value.forEach((item, index) => {
    item.teamData = JSON.parse(item.teamData);
  });
  teamList.value = data.data.headers;
  teamName.value = "";
  number.value = "";
  showNumTask.value = false;
  console.log(data, "data");
};
const confirmChooseNum = () => {
  if (number.value && teamName.value) {
    againResultFn();
  } else {
    showNumTask.value = false;
  }
};
const getBlob = (url) => {
  return new Promise((resolve) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      }
    };

    xhr.send();
  });
};
const saveAs = (blob, filename) => {
  var link = document.createElement("a");
  link.href = window.URL.createObjectURL(blob);
  link.download = filename;
  link.click();
};
const getAllResultFn = async () => {
  const data = await getAllResult();
  tableList.value = data.data.rows;
  tableList.value.forEach((item, index) => {
    item.teamData = JSON.parse(item.teamData);
  });
  teamList.value = data.data.headers;
  console.log(data, "最终结果");
};
// 最终确认标记
const resultBtn = ref(false);
const confirmResultFn = async () => {
  const data = await confirmResult();
  resultBtn.value = true;
  //   window.open(data.data);
  let a = document.createElement("a");
  a.style = "display: none"; // 创建一个隐藏的a标签
  a.download = "结果";
  a.href = data.data;
  document.body.appendChild(a);
  a.click(); // 触发a标签的click事件
  document.body.removeChild(a);

  getAllResultFn();
};
const handleConfirmResult = () => {
  confirmResultFn();
};
const tableList = ref([]);
const teamList = ref([]);

// 删除
const deleteResultFn = async (id) => {
  const data = await deleteResult({ faultPointId: id });
  tableList.value = data.data.rows;
  tableList.value.forEach((item, index) => {
    item.teamData = JSON.parse(item.teamData);
  });
  teamList.value = data.data.headers;
  console.log(data, "res");
};
const handleDeleteItem = (item) => {
  deleteResultFn(item.faultPointId);
};
const getListFn = async () => {
  const data = await getListData({
    type: "0" + route.query.type,
    datas: JSON.parse(route.query.choose),
  });
  tableList.value = data.data.rows;
  tableList.value.forEach((item, index) => {
    item.teamData = JSON.parse(item.teamData);
  });
  teamList.value = data.data.headers;
  console.log(data);
};
onMounted(() => {
  getListFn();
});
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.result {
  width: 1920px;
  height: 1080px;
  position: relative;
  .table-container {
    position: absolute;
    top: 12%;
    left: 4.5%;
    width: 1768px;
    height: 860px;
    background: url(./assets/jieguoye-01.png) no-repeat top center / 100%;
    padding: 60px 40px 0 40px;
    .primary-btn {
      position: absolute;
      bottom: 8%;
      left: 50.5%;
      transform: translateX(-50%);
      width: 213px;
      height: 75px;
      background: url(./assets/primary-btn.png) no-repeat top center / 100%;
      cursor: pointer;
    }
    .table-content {
      width: 1688px;
      height: 80%;
      overflow-x: scroll;
      overflow-y: scroll;
      border: 2px solid #57c7ed;
      background-color: #14324b;
      &.table-result {
        height: 95%;
      }

      /* 滚动条整体部分 */
      &::-webkit-scrollbar {
        height: 4px;
        width: 4px;
      }
      /* 滚动条里面的滑块 */
      &::-webkit-scrollbar-thumb {
        background-color: rgba(234, 254, 255, 1);
        border-radius: 20px;
      }
      .part {
        min-width: 1688px;
        // flex: 0 0 auto;
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        font-size: 24px;
        cursor: pointer;
        div {
          flex: 0 0 auto;
        }
        .operate,
        .index {
          width: 160px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }
        // .operate {
        //   position: sticky;
        //   top: 0;
        //   left: 0;
        // }
        .desc {
          width: 500px;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 20px;
        }
        .operate-img {
          width: 97px;
          height: 40px;
        }
        .team-img {
          width: 49px;
          height: 48px;
        }
        .team-item {
          width: 152px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 16px;
        }
      }
      .header {
        min-width: 100%;
        background-color: #041220;
        color: #13c3e2;
        position: sticky;
        top: 0;
        div {
          padding: 10px 0;
          background-color: #041220;
        }
        .team-item {
          position: relative;
          .count {
            position: absolute;
            top: 16px;
            right: 17px;
            color: #fff;
            font-family: DINPro;
            font-size: 14px;
            width: 14px;
            text-align: center;
            line-height: 14px;
          }
          div {
            width: 132px;
            height: 63px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 5px 12px 0;
            // line-height: 40px;
          }
          .serious {
            color: #e27985;
            background: url(./assets/jieguoye03.png) no-repeat top center / 100%;
          }
          .general {
            color: #e9a83d;
            background: url(./assets/jieguoye04.png) no-repeat top center / 100%;
          }
          .secure {
            color: #62d2b2;
            background: url(./assets/jieguoye05.png) no-repeat top center / 100%;
          }
          .normal {
            color: #bfbfbf;
            background: url(./assets/jieguoye06.png) no-repeat top center / 100%;
          }
        }
      }
      .content {
        font-size: 20px;
        color: #9fbedd;
        .desc {
          padding: 20px;
        }
        div {
          border-right: 1px solid #01162a;
          border-bottom: 1px solid #01162a;
        }
      }
    }
  }

  .mask {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(4, 18, 32, 0.5);
  }

  .num-task {
    position: absolute;
    top: 45%;
    left: 51%;
    transform: translate(-50%, -50%);
    width: 1250px;
    height: 350px;
    background-color: rgba(0, 33, 56, 0.9);
    border: 2px solid #5ed5fc;
    box-shadow: 0 0 1px #259dcf;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    .task-text {
      position: absolute;
      left: 50%;
      top: 8%;
      color: #fff;
      font-size: 32px;
      transform: translateX(-50%);
    }
    .num-item {
      padding: 0 20px;
      background-color: #01162a;
      //   color: #093b5d;
      color: #52d3eb;
      font-size: 80px;
      font-family: DINPro;
      border: 1px solid transparent;
      cursor: pointer;
      &.active {
        color: #52d3eb;
        border-color: #57c7ed;
        background-color: rgba(9, 59, 93, 0.9);
      }
    }
  }
  .primary-btn {
    position: absolute;
    bottom: 15%;
    left: 51%;
    transform: translateX(-50%);
    width: 213px;
    height: 75px;
    background: url(./assets/primary-btn.png) no-repeat top center / 100%;
    cursor: pointer;
  }
}
</style>
